/* components/tree-item/tree-item.wxss */
.tree-item {
  width: 100%;
  background-color: #fff;
  /* 根据层级计算缩进 */
  padding-left: calc((var(--level, 1) - 1) * 40rpx);
	box-sizing: border-box;
}

.item-content {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx 24rpx 24rpx; /* 左侧padding由父级控制 */
  background-color: #fff;
  border-bottom: 1rpx solid #ebedf0;
  transition: background-color 0.2s;
  position: relative;
}

.item-content:active {
  background-color: #f2f3f5;
}

.expand-icon-wrapper {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.arrow-icon {
  transition: transform 0.3s ease-in-out;
  color: #909399;
}

.arrow-icon.expanded {
  transform: rotate(90deg);
}

.info {
  flex: 1;
  min-width: 0; /* 防止被挤压 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name-line {
  display: flex;
  align-items: center;
}

.name {
  font-size: 28rpx;
  color: #303133;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remark-tag {
  margin-left: 16rpx;
  flex-shrink: 0; /* 防止标签被压缩 */
}

.price-remark-line {
  font-size: 24rpx;
  color: #909399; /* 使用警告色 */
  margin-top: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions {
  display: flex;
  align-items: center;
  margin-left: 24rpx;
  flex-shrink: 0;
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.price {
  font-size: 30rpx;
  color: #f56c6c;
  font-weight: bold;
  font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
}

.unit {
  font-size: 22rpx;
  color: #909399;
}

.no-price {
  font-size: 26rpx;
  color: #c0c4cc;
}

.edit-icon {
  font-size: 40rpx;
  color: #19be6b;
  margin-left: 32rpx;
	padding: 10rpx; /* 增大点击区域 */
}

.children-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f7f8fa; /* 给子项一个轻微的背景色以区分 */
}

/* 移除最后一项的底部分割线，更美观 */
.tree-item:last-child > .item-content {
  border-bottom: none;
}
